<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>：省市区三级联动插件</title>
  <script src="./vue.js"></script>
  <script src="./city-picker.data(1).js"></script>
  <style>
    .container {
      width: 500px;
      margin: auto auto;
    }

    form {
      display: flex;
      flex-direction: row;
    }

    .input {
      border-bottom: 1px solid grey;

    }

    .input span {
      cursor: pointer;
    }

    .control {
      cursor: pointer;
      width: 310px;
      border: none;
      height: 23px;
    }

    .information {
      width: 325px;
    }

    .information .title {
      height: 30px;
      line-height: 30px;
      background-color: #F0F0F0;

    }

    .information .title span {
      cursor: pointer;
      padding: 7px 15px;
      border-right: 1px solid grey;
    }


    .total div {
      padding: 20px 0;
      background-color: #fff9f9;
      padding-right: 15%;
    }

    .total div dl {
      margin-top: 0px;
    }

    .total div dt {
      float: left;
    }

    .total div a {
      padding: 2px 5px;
      color: black;
      text-decoration: none;

    }

    .total div a:hover{
      background-color: rgb(168, 253, 225);
    }

    .city dd,.area dd{
     margin-left: 20px;
    }

    .form-group button {
      color: aliceblue;
      border: none;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
    }

    .btn-warning {
      margin-left: 10px;
      background-color: #ec971f;
    }

    .btn-danger {
      background-color: #d9534f;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2 class="page-header">省市区三级联动</h2>
    <form>
      <!-- 输入框 -->
      <div class="formData">
        <div class="input">
          <input class="control" readonly type="text" v-model="name" placeholder="请选择省/市/区" @click.prevent="formShown">
          <span @click="formShown">^</span>
        </div>
        <div class="information" v-if="formShow">
          <div class="title">
            <span @click="pro">省份</span>
            <span @click="cy">城市</span>
            <span @click="ae">区县</span>
          </div>
          <div class="total">
            <!-- 省 -->
            <div class="province" v-show="provin">
              <dl v-for="(value, key) in province" :key="value.code">
                <dt>{{key}}</dt>
                <dd>
                  <a href="" v-for="(item, index) in value" @click.prevent="cy(),proback(item.code,item.address)"
                    :key="index">{{item.address}}</a>
                </dd>
              </dl>
            </div>
            <!-- 市 -->
            <div class="city" v-show="city">
              <dl>
                <dd>
                  <a href="" @click.prevent="ae(),cityback(index,item)" v-for="(item, index) in citys"
                    :key="index">{{item}}</a>
                </dd>
              </dl>
            </div>
            <!-- 区 -->
            <div class="area" v-show="area">
              <dl>
                <dd>
                  <a href="" @click.prevent="formfade(),areaback(item) " v-for="(item, index) in areas"
                    :key="index">{{item}}</a>
                </dd>
              </dl>
            </div>
          </div>
        </div>

      </div>
      <!-- 按钮 -->
      <div class="form-group">
        <button class="btn-warning" type="reset" @click="formfade">重置</button>
        <button class="btn-danger" type="submit" @click="formfade">确定</button>
      </div>
    </form>
  </div>
</body>

<script type="module">
  import alldata from "./city-picker.data(1).js";
  let container = new Vue({
    el: ".container",//挂载的元素
    //当前vue的数据源
    data() {
      return {
        msg: [false, false, false],
        formShow: false,
        provin: true,
        city: false,
        area: false,
        name: "",
        //  省
        chinadata: alldata,
        province: alldata[86],
        // 市
        citys: "",
        // 区
        areas: ""
      }
    },
    methods: {
      proback(code,province) {
        console.log(province)
        this.name = province
        this.citys = this.chinadata[code]
      },
      cityback(code,city) {
        console.log(city)
        this.name += "/"+city
        this.areas = this.chinadata[code]
      },
      areaback(area){
        console.log(area)
        this.name += "/"+area
      },
      // 表单出现并初始化
      formShown() {
        this.name = ""
        this.provin = true,
          this.city = false,
          this.area = false
        this.formShow = true
      },
      formfade() {
        this.formShow = false
      },
      pro() {
        this.provin = true,
          this.city = false,
          this.area = false
      },
      cy() {
        this.provin = false,
          this.city = true,
          this.area = false
      },
      ae() {
        this.provin = false,
          this.city = false,
          this.area = true
      }
    },
    watch: {
    }
  });
</script>

</html>